<template>
  <div class="store-one-wrap">

    <div class="gain-lock-box" v-if="showLock == 1">
      <div class="store-bg-box">
        <span class="store-name">{{storeUserName}}({{proxyRole == 6 ? '店员':'店主'}})</span>
        <span class="line-one"></span>
        <span class="shop-num">门店编号：{{shopNum}}</span>
        <span class="register-time">注册时间：{{shopOpenTime}}</span>
      </div>

      <div class="statistics-people-box">
        <div class="shop-people" v-if="proxyRole == 1 || proxyRole == 2" @click="openShopAssistant">
          <span class="people-num">{{shopUserNum}}人</span>
          <span class="people-title">店员</span>
        </div>

        <div class="shop-people" v-else-if="proxyRole == 6" @click="openStoreInfo">
          <img src="./manager.png" class="pic5"/>
          <span class="people-title">店主信息</span>
        </div>

        <div class="shop-people" @click="staffPage">
          <span class="people-num">{{shopLabourNum}}人</span>
          <span class="people-title">我的员工</span>
        </div>
      </div>

      <div class="store-item-content-box" @click="qRPage">
        <div class="item-content">
          <span class="item-content-title">门店二维码</span>
          <div class="qr-box">
            <img src="./qr.png" class="qr"/>
            <img src="../../../images/in.png" class="pic4"/>
          </div>
        </div>
      </div>
      <div class="store-item-content-box" v-if="proxyRole == 1 || proxyRole == 2" @click="openWorkerList">
        <div class="item-content">
          <span class="item-content-title">门店招工详情</span>
          <img src="../../../images/in.png" class="pic3"/>
        </div>
      </div>
    </div>

    <div class="gain-lock-box" v-if="showLock == 2">
      <div class="lock-box">
        <img src="./lock_icon.png" class="lock-pic" onclick="return false"/>
        <span class="lock-tip">您当前没有门店权限~</span>
        <button class="lock-opt" type="button" @click="applyPage">立即申请</button>
      </div>
    </div>

    <div class="store-shop-info-box" v-show="showStoreInfo">
      <div class="store-shop-info">
        <img :src="storeUserUrl" class="pic5" onclick="return false" v-if="storeUserUrl"/>
        <span class="pic8" v-else></span>
        <span class="store-shop-name">{{storeUserName}}</span>
        <div class="mobile-info">
          <img src="../../../images/phone_icon.png" class="pic6" onclick="return false"/>
          <span class="phone-num">{{storeUserTel}}</span>
        </div>
        <img src="../../../images/close_diff.png" class="pic7" onclick="return false" @click="closeStoreInfo"/>
      </div>
    </div>
  </div>

</template>

<script>
  import {formatDate, getSessionStore} from "../../../config/util";
  import {getShopApply, getShopInfo} from "../../../axios/api";

  export default {
    data() {
      return {
        showLock: 1,
        proxyRole: "",//1 直营店主 2为加盟店主 5为代理 6店员
        shopNum: "",
        shopOpenTime: "",
        shopUserNum: "",
        shopLabourNum: "",
        storeUserName: "",
        storeUserTel: "",
        storeUserUrl: "",
        showStoreInfo: false
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
      this.proxyRole = getSessionStore("proxy_role");
      if (this.proxyRole != 5) {//5为代理
        this.showLock = 1;
        this.queryShopInfo();
      } else {
        this.showLock = 2;
      }
    },
    methods: {
      queryShopInfo() {//查询门店信息
        let params = {
          "sgin": this.userMark,
          "type": this.proxyRole
        };

        getShopInfo(params).then((res) => {
          if (res.code == 0 && res.data != null) {
            this.shopNum = res.data.shopNum;//店子编号
            this.shopOpenTime = formatDate(new Date(res.data.time), 'yyyy-MM-dd');//注册时间
            this.shopUserNum = res.data.shopUserNum;//店员人数
            this.shopLabourNum = res.data.shopLabourNum;//我的员工人数
            this.storeUserName = res.data.userName;
            this.storeUserTel = res.data.userTel;
            this.storeUserUrl = res.data.userUrl;
          } else {
            this.$vux.toast.text(res.msg, "middle");
          }
        });
      },
      applyPage() {//申请门店
        let params = {
          "sgin": this.userMark
        };
        getShopApply(params).then((res) => {
          if (res.code == 0 && res.data != null) {
            this.$router.push("/applyStoreRecord");
          } else {
            this.$router.push("/applyStore");
          }
        });
      },
      qRPage() {
        this.$router.push({
          path: "/qrCode",
          query: {"identity": getSessionStore("proxy_identity"), "avatar": getSessionStore("proxy_avatar"), "origin": "proxy"}
        });
      },
      openStoreInfo() {
        this.showStoreInfo = true;
      },
      closeStoreInfo() {
        this.showStoreInfo = false;
      },
      openShopAssistant() {//店员管理页
        this.$router.push("/assistantList");
      },
      openWorkerList() {//门店招工详情页
        this.$router.push("/workerList");
      },
      staffPage() {//我的员工页
        this.$router.push("/staffList");
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .store-one-wrap {
    display: flex;
    flex-direction: column;
    .wh(100%, 100%);
    background: #FFF;
    .store-bg-box {
      .fj(center, center);
      flex-direction: column;
      margin: 0.267rem auto 0;
      .wh(9.573rem, 4rem);
      .bg-image('../page/index/store/home_bg.png');
      .store-name {
        padding-bottom: 0.373rem;
        .size-color-weight(0.587rem, rgba(255, 255, 255, 1), 500);
      }
      .line-one {
        margin-bottom: 0.32rem;
        .wh(4.533rem, 0.027rem);
        background: rgba(255, 255, 255, 0.36);
      }
      .shop-num {
        padding-bottom: 0.213rem;
        .size-color(0.373rem, rgba(245, 245, 245, 1))
      }
      .register-time {
        .size-color(0.373rem, rgba(245, 245, 245, 1))
      }
    }
    .statistics-people-box {
      display: flex;
      align-items: center;
      .wh(100%, 2.667rem);
      .shop-people {
        .fj(center, center);
        flex-direction: column;
        flex: 1;
        height: 1.373rem;
        border-right: 0.027rem dashed #E6E6E6;
        .people-num {
          padding-bottom: 0.187rem;
          .size-color-weight(0.533rem, rgba(60, 175, 255, 1), 500);
        }
        .people-title {
          .size-color(0.373rem, rgba(153, 153, 153, 1))
        }
        .pic5 {
          padding-bottom: 0.187rem;
          .wh(0.64rem, 0.64rem);
        }
      }
    }
    .store-item-content-box {
      .wh(100%, 1.333rem);
      background: #FFF;
      display: flex;
      .item-content {
        position: relative;
        margin-left: 0.32rem;
        display: flex;
        align-items: center;
        .wh(96.8%, 1.333rem);
        border-bottom: 0.027rem solid rgba(242, 242, 242, 1);
        .item-content-title {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .qr-box {
          margin-left: auto;
          margin-right: 0.32rem;
          display: flex;
          align-items: center;
          .qr {
            margin-right: 0.2rem;
            .wh(0.587rem, 0.587rem);
          }
          .pic4 {
            .wh(0.32rem, 0.32rem);
          }
        }
        .pic3 {
          margin-left: auto;
          margin-right: 0.32rem;
          .wh(0.32rem, 0.32rem);
        }
      }
    }
    .lock-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      .lock-pic {
        margin-top: 3.68rem;
        .wh(2.667rem, 2.667rem);
      }
      .lock-tip {
        margin-top: 0.653rem;
        .size-color(0.373rem, rgba(153, 153, 153, 1));
      }
      .lock-opt {
        margin-top: 1.6rem;
        .wh(4.267rem, 1.28rem);
        border-radius: 0.16rem;
        background: rgba(60, 175, 255, 1);
        .size-color(0.453rem, rgba(255, 255, 255, 1));
      }
    }
    .store-shop-info-box {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 100;
      background-color: rgba(0, 0, 0, 0.5);
      .store-shop-info {
        .fj(center, center);
        flex-direction: column;
        margin: 3.333rem auto 0;
        position: relative;
        .wh(8rem, 4.8rem);
        background: rgba(255, 255, 255, 1);
        border-radius: 0.16rem;
        .pic5 {
          .wh(1.6rem, 1.6rem);
          border-radius: 50%;
          margin-bottom: 0.533rem;
        }
        .pic8 {
          .wh(1.6rem, 1.6rem);
          border-radius: 50%;
          background: #f2f2f2;
          margin-bottom: 0.533rem;
        }
        .store-shop-name {
          margin-bottom: 0.36rem;
          .size-color-weight(0.48rem, rgba(51, 51, 51, 1), 500);
        }
        .mobile-info {
          display: flex;
          align-items: center;
          .pic6 {
            .wh(0.4rem, 0.4rem);
          }
          .phone-num {
            margin-left: 0.187rem;
            .size-color(0.427rem, rgba(153, 153, 153, 1));
          }
        }
        .pic7 {
          position: absolute;
          top: 0.293rem;
          right: 0.293rem;
          .wh(0.48rem, 0.48rem);
        }
      }
    }
  }
</style>
